@import '@influxdata/clockface/dist/variables.scss';

.announcement-center {
  margin-top: $cf-space-m;
}

.announcement-block {
  .cf-panel {
    background-color: transparent;
  }

  .announcement-block--type {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-self: stretch;
    align-items: center;
    color: $cf-grey-35;

    .announcement-block--type-icon {
      font-size: $cf-text-base-1;
      margin-top: $cf-space-2xs;
      display: block;
    }

    .announcement-block--date {
      display: block;
      text-align: center;
      font-size: $cf-text-base--1;
      line-height: $cf-text-base-1;
      margin-top: $cf-space-2xs;
      text-transform: uppercase;
      font-weight: bold;
    }
  }

  .announcement-block--panel {
    .announcement-block--panel-header {
      padding: $cf-space-2xs;

      h4 {
        color: $cf-grey-85;

        a:link,
        a:visited {
          color: $cf-grey-85;
        }

        a:hover {
          color: $c-laser;
        }
      }

      img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
        border-radius: $cf-radius;
      }
    }

    .announcement-block--panel-header__image {
      flex-direction: column;
      align-items: flex-start;

      h4 {
        margin-top: $cf-space-m;
      }
    }

    .announcement-block--image-spacer {
      padding: $cf-space-s $cf-space-2xl;
      border-radius: $cf-radius;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      width: 100%;

      &.announcement-block--image-spacer__light {
        background-color: $cf-grey-95;
      }
    }

    .announcement-block--panel-body {
      color: $cf-grey-55;
    }

    .announcement-block--panel-footer {
      border: none;
    }
  }
}

@media screen and (min-width: $cf-grid--breakpoint-sm) {
  .announcement-center {
    margin-top: 0;
  }
}
